<template>
  <div id="mainline">
<el-tabs id="label" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="文本转换" name="first" ></el-tab-pane>
    <el-tab-pane label="网址转换" name="second"></el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
export default {
name:'Scline',
data() {
      return {
        activeName: 'first'
      };
    },
 mounted:function(){
    this.updateType()
},
    methods: {
      handleClick(tab, event) {
        if (tab.index == 0) {
        this.$router.push('/')  
      } 
        if (tab.index == 1) {

        this.$router.push('/Httpboxv') 
      } 
      },
    updateType() {
    
          let src = this.$route.query.src;
            if(src == 0) {
                this.activeName = 'first';
            }else if(src == 1) {
                this.activeName = 'second';
            }else  {
                this.activeName = 'first';
            }
        },
    }
}
</script>

<style >
.el-tabs__item{
    color: #999999 !important;
}
.el-tabs__item.is-active,.el-tabs__item:hover{
    color: #3785ED !important;
    /* border-color:#3a993f !important; */
}
.el-tabs__active-bar {
  background-color: #3785ED !important;
}
 
#label{
  position: absolute !important;
  top:20px;
  left: 290px;
}
#mainline{
    position: absolute;
    width: 100%;
    height: 40px;
    background-color:#F1F4F8;
    display: flex;
}
#scword,#scwordr{
    position: relative;
    left:270px;
    align-self: center;
    margin-left: 20px;
    cursor: default;
}
#scwordr{
    left:550px;
font-size: 14px;
}
.spword{
    color:  #3a993f;
    font-weight: 600;
}
a{
  color: black;
  margin: 0;
  margin-top: 10px;
}
</style>